<template>
    <div>
        <el-button @click="test">测试element</el-button>22
        <router-link to="/layout">跳转</router-link>
        <br/>
        参数显示：{{text}}
    </div>
</template>
<script>
    import { mapActions } from 'vuex'//设置state所用的方法
    import { mapState } from 'vuex' //获取state所用方法
export default {
    name:'Home',
    data(){
        return{
            courseSiderbar:[{"name":0}]
        }
    },
    computed:{
        //由于加载数据的延迟或者先后的问题，获取state尽量写在计算属性computed中
        // text(){
        //     return this.$store.state.text
        // }
        //利用mapState获取store中的属性，等同于return this.$store.state.text
        ...mapState(['text'])
    },
    methods:{
        test(){
            this.$message.success("111111");
            console.log(this.$router)
            console.log(this.$route)
            //传统方法调用action中的saveSiderbarAction
            this.$store.dispatch('saveSiderbarAction', this.$router.options.routes);
            //调用mapActions中定义的changeText
            //等同于this.$store.dispatch('changeText', "3");
            this.changeText(3)
            //获取state
            console.log(this.$store.state.courseSiderbar);//传统方法调用
        },
        //通过mapActions方法定义changeText
        ...mapActions(['changeText'])
    }
}
</script>
